<template>
	<view class="box">
		<tito class="tito" title="充值" lefticon="left" @clickLeft="clickLeft" />
		<view class="information">
			<view class="text-code">
				<view class="code">
					设备编号
				</view>
				<view class="text">
					{{setMealDate.code}}
				</view>
			</view>
			<view class="text-code">
				<view class="code">
					设备型号
				</view>
				<view class="text">
					{{setMealDate.modelName}}
				</view>
			</view>
			<view class="text-code">
				<view class="code">
					剩余余额(元)
				</view>
				<view class="money">
					{{setMealDate.leftNumber}}
				</view>
			</view>
			<view class="text-code">
				<view class="code">
					激活时间
				</view>
				<view class="text">
					{{setMealDate.startTime}}
				</view>
			</view>
		</view>
		<view class="package">
			<view :class="index == packageList ? 'packageList' : 'packageLists'"
				v-for="(item,index) in setMealDate.setMealList" :key="item.id" @click="getpackage(item,index)">
				<view class="packageText">
					{{item.name}}
				</view>
				<view class="icom-number">
					<text class="icom">￥</text>
					<text class="number">{{item.money}}</text>
				</view>
			</view>
		</view>
		<view class="payment">
			<view class="image-text-checkbox" v-for="(item,index) in paymentList" :key="item.id">
				<view class="image">
					<image :src="item.url" mode=""></image>
				</view>
				<view class="text">
					{{item.name}}
				</view>
				<view class="checkbox">
					<checkbox-group @change="handleCheckboxChange">
						<label>
							<checkbox v-model="item.id" :checked="item.id == paymentId" color="#2590FA" />
						</label>
					</checkbox-group>
				</view>
			</view>
		</view>
		<view class="bnt">
			<view class="text-money-immediately">
				<view class="text-money">
					合计:
					<text class="icon">￥</text>
					<text class="number">{{money}}</text>
				</view>
				<view class="immediately" @click="getpayment">
					立即支付
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				packageList: 0,
				paymentId: '2',
				paymentList: [{
						id: '2',
						name: "微信支付",
						url: require("../static/weixin.png")
					},
					// {
					// 	id: '1',
					// 	name: "支付宝支付",
					// 	url: require("../static/zhifubao.png")
					// }
				],
				productId: "",
				setMealDate: {}, //套餐列表
				money: '', //套餐价格
				package: {}, //套餐信息

			};
		},
		onLoad(ope) {
			if (ope.productId) {
				this.productId = ope.productId
			}
			this.setMealList()
		},
		methods: {
			//套餐列表
			async setMealList() {
				let res = await this.$request.get("/water-platform-app-api/customer/rechargeLog/setMealList", {
					productId: this.productId
				})
				if (res.data) {
					console.log(res, '----套餐列表----');
					this.setMealDate = res.data
					this.money = res.data.setMealList[0].money
					this.package = res.data.setMealList[0]
				}
			},
			clickLeft() {
				uni.navigateBack()
			},
			//套餐选择
			getpackage(e, inx) {
				this.money = e.money
				this.package = e
				this.packageList = inx
			},
			//选择支付方式
			handleCheckboxChange(event) {
				const checkedId = event.detail.value[0];
				this.paymentId = checkedId;
			},
			//支付
			async getpayment() {
				let data = {
					setMealId: this.package.id, //套餐id
					productId: this.productId, //设备id
					type: this.paymentId, //支付方式: 1-支付宝, 2-微信, 3-余额
					openId: uni.getStorageSync("openId").openid
				}
				await this.$request.get("/water-platform-app-api/customer/rechargeLog/save", data).then(res => {
					console.log(res, '充值保存');
					//pay false 不需要支付  true 需要支付
					if (res.data && !res.data.pay) {
						uni.showToast({
							title: "充值成功",
							icon: "none"
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					} else {
						uni.requestPayment({
							provider: "wxpay",
							nonceStr: res.data.noncestr,
							package: res.data.packages,
							signType: res.data.signType,
							paySign: res.data.sign,
							timeStamp: res.data.timestamp,
							success: res => {
								var rawdata = JSON.parse(res.rawdata);
								uni.showToast({
									title: '支付成功',
									icon: 'none'
								})
								setTimeout(() => {
									uni.redirectTo({
										url: "/subpackageA/pages/mall/orderDetails?orderId=" +
											res.data.extraInfo
									})
								}, 1000)
							},
							fail: function(err) {
								console.log('支付失败:' + JSON.stringify(err));
							}
						})
					}

				})

			},
		}
	}
</script>

<style lang="scss">
	.box {
		min-height: 100vh;
		background-color: #F3F5F6;
	}

	.information {
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 0 30rpx;
		margin-top: 64rpx;
		padding: 24rpx;
		box-sizing: border-box;

		.text-code:first-child {
			margin-top: 0rpx;
		}

		.text-code {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			margin-top: 32rpx;

			.code {
				color: #616366;
				margin-right: 24rpx;
			}

			.text {
				color: #14171A;
			}

			.money {
				color: #FA6B05;
			}
		}
	}

	.package {
		margin: 0 30rpx;
		margin-top: 64rpx;
		display: flex;
		grid-gap: 16rpx;

		.packageList {
			width: 220rpx;
			height: 146rpx;
			background: #FAEBE1;
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(250, 107, 5, 0.15);
			border-radius: 8rpx;
			border: 2rpx solid #FA6B05;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.packageText {
				font-size: 28rpx;
				color: rgba(250, 107, 5, 0.8);
			}

			.icom-number {
				color: #FA6B05;
				margin-top: 8rpx;

				.icom {
					font-size: 28rpx;
				}

				.number {
					font-size: 36rpx;
				}
			}
		}

		.packageLists {
			width: 220rpx;
			height: 146rpx;
			background: #FFF;
			box-shadow: 0rpx 6rpx 12rpx 0rpx #E8E9EA;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.packageText {
				font-size: 28rpx;
				color: rgba(250, 107, 5, 0.8);
			}

			.icom-number {
				color: #FA6B05;
				margin-top: 8rpx;

				.icom {
					font-size: 28rpx;
				}

				.number {
					font-size: 36rpx;
				}
			}
		}
	}

	.payment {
		// height: 176rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 0 30rpx;
		margin-top: 64rpx;

		.image-text-checkbox {
			display: flex;
			align-items: center;

			.image {
				image {
					width: 48rpx;
					height: 48rpx;
					vertical-align: middle;
				}
			}

			.text {
				margin-left: 16rpx;
				font-size: 28rpx;
				color: #2E3033;
			}

			.checkbox {
				margin-left: auto;
			}
		}
	}

	.bnt {
		width: 100%;
		height: 204rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 30rpx 0rpx rgba(101, 101, 102, 0.1);
		position: fixed;
		left: 0%;
		bottom: 0;

		.text-money-immediately {
			padding: 32rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.text-money {
				font-size: 28rpx;
				color: #2E3033;
			}

			.icon {
				font-size: 28rpx;
				color: #FA6B05;
			}

			.number {
				font-size: 36rpx;
				color: #FA6B05;
			}
		}

		.immediately {
			width: 232rpx;
			height: 72rpx;
			background: linear-gradient(144deg, #FAA805 0%, #FA6B05 100%);
			border-radius: 100rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 72rpx;
		}
	}
</style>